<template>
    <div>
    
        <van-row >

            <van-row class="head">
              <van-row>
                <van-col span="24">
                  <p style="text-align: center;">我的</p>
                </van-col>
              </van-row>
              <van-row style="margin-top: 2rem;">
                <van-col span="6" >
                  <van-image
                    round
                    width="4rem"
                    height="4rem"
                    src="https://img01.yzcdn.cn/vant/cat.jpeg"
                  />
                </van-col>
                <van-col span="6"  style="line-height: 3rem;">{{ username }}</van-col>
              </van-row>
              <van-row style="margin-bottom: 1rem;">
                <van-col span="6" offset="18">余额</van-col>
              </van-row>
              <van-row style="margin-bottom: 1rem;">
                <van-col span="6" offset="18">￥{{usermoney  }}</van-col>
              </van-row>
            </van-row>
            <van-row class="content">
            
            <!-- 滚动条 -->
            <van-row style="margin-top: 1rem;">
              <van-notice-bar left-icon="volume-o" :scrollable="false">
                <van-swipe
                  vertical
                  class="notice-swipe"
                  :autoplay="3000"
                  :show-indicators="false"
                >
                  <van-swipe-item>我说过我只要略微出手就已经是这个分段的极限了</van-swipe-item>
                  <van-swipe-item>那年我双手插兜</van-swipe-item>
                  <van-swipe-item>不知道什么叫对手</van-swipe-item>
                </van-swipe>
              </van-notice-bar>
            </van-row>

            <!-- 按钮 -->
          <van-row style="margin-top: 2rem;">
            
            <!-- <van-col span="2">&nbsp;</van-col> -->
           
            <van-col span="24" style="text-align: left;">
              <van-cell title="地址管理" is-link icon="location-o"  @click="addressMa"      class="cell" />
              <van-cell title="充值管理" is-link icon="gold-coin-o"  @click="sendMoney"      class="cell"/>
              <van-cell title="修改密码" is-link icon="user-circle-o" @click="modifyPassword" class="cell"/>
              <van-cell title="关于我们" is-link icon="smile-o" @click="appointment"    class="cell" />
              <van-cell title="联系我们" is-link icon="smile-comment-o" @click="message"        class="cell"/>
              <van-cell title="退出登录" is-link icon="revoke"  @click="exitlogin"      class="cell"/>
            </van-col>
            <!-- <van-col span="2">&nbsp;</van-col> -->

          </van-row>
     
          </van-row>
        </van-row>
        
        <Footer></Footer>
    </div>
   
</template>

<script>
  import Footer from '../../components/Footer.vue'
  import {getUserMoney} from '@/api/index'
  export default {
       components: { Footer },
       data(){
        return{
          username:localStorage.getItem("username"),
          usermoney:0,
        }

       },
       methods:{

        //得到用户剩余钱数
        getUserMoney(){
          getUserMoney(this.username).then(res=>{
            this.usermoney=res.data.data
          })
        },
        // 退出登录
        exitlogin(){
          this.$router.push("/")
        },
        // 地址管理
        addressMa(){
          this.$router.push("/address")
        },
        //充值管理
        sendMoney(){
          this.$router.push("/sendMoney")
        },
        //修改密码
        modifyPassword(){
          this.$router.push("/modifypwd")
        },
        //我的预约
        appointment(){
          this.$router.push("/aboutUs")
        },
        //联系我们
        message(){
          this.$router.push("/contactUs")
        }
       },
       mounted(){
        //得到用户剩余钱数
        this.getUserMoney()
       }
  }
</script>
<style>
  .head{
    height: 14rem;
    background-color: #a4d0db;
  }
  .notice-swipe {
    height: 40px;
    line-height: 40px;
  }
  .content{
    margin: 0px;
  }
  .cell{
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
</style>